<template>
  <div class="app-container">
    <div class="title">添加试题</div>
    <div class="warn"><i class="el-icon-info"></i>在使用软件期间，不得上传违反国家法律法规内容，不得上传侵权或涉密内容</div>
    <template>
      <el-tabs v-model="activeName" @tab-click="handleClick">

        <el-tab-pane label="批量导入" name="batch">
          <batchExprotSctk :id="id" :chapters="chapters" @refresh-chapters="getChapters" v-if="id !== null">
          </batchExprotSctk>
        </el-tab-pane>
        <!-- <el-tab-pane label="文档导入" name="document">
          <excelExprotSctk :id="id" v-if="id !== null"></excelExprotSctk>
        </el-tab-pane> -->
        <el-tab-pane label="单题导入" name="singleton">
          <singleSctk :id="id" :chapters="chapters" @refresh-chapters="getChapters" v-if="id !== null">
          </singleSctk>
        </el-tab-pane>
      </el-tabs>

    </template>

  </div>
</template>
<script>
import batchExprotSctk from './components/BatchExprotSctk';
import excelExprotSctk from './components/ExcelExprotSctk';
import singleSctk from './components/SingleSctk';
import { getTempSctk } from '@/api/sctk';
import { transListToTreeDataOnChapter } from '@/utils'
import { getSctktChapterList } from '@/api/sctkChapter'
export default {
  name: 'addSctk',
  components: {
    batchExprotSctk,
    excelExprotSctk,
    singleSctk
  },
  created() {
    this.init()
  },
  data() {
    return {
      activeName: 'batch',
      id: null,
      chapters: []
    }
  },
  methods: {
    handleClick(tab, event) {
    },
    async init() {
      if (this.$route.params.id) {
        console.log('编辑模式，ID:', this.$route.params.id);
        this.id = Number(this.$route.params.id);
      } else {
        await this.getTempSctk();
      }

      if (this.id !== null) {
        await this.getChapters();
      }
    },
    async getTempSctk() {
      const result = await getTempSctk({ temp: 0 })
      this.id = result

    },
    async getChapters() {
      let result = await getSctktChapterList({ fk_t_sctk_id: this.id })
      // 递归处理
      this.chapters = transListToTreeDataOnChapter(result, 0)

    }
  }

}
</script>
<style scoped>
.app-container {
  margin: 10px;
  background: #fff;
  border-radius: 5px;
  padding: 10px;

  .title {
    display: block;
    height: 40px;
    line-height: 40px;
    font-size: 16px;
    /* 文字居中对齐 */
    margin-bottom: 10px;
    /* 给标题下方留出间距 */
    border-bottom: 1px solid #e8eaec;
  }

  .warn {
    display: block;
    height: 20px;
    line-height: 20px;
    font-size: 12px;
    /* 文字居中对齐 */
    margin-bottom: 10px;
    /* 给标题下方留出间距 */
    border-bottom: 1px solid #e8eaec;
    background: #fffbe6;
  }

}
</style>
